<template>
	<view class="index">

		<view class="bannerBox">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
				style="width: 686rpx;height: 396rpx;border-radius: 20rpx;">
				<swiper-item v-for="(item,index) in bannerList" :key="index"
					style="text-align: center;border-radius: 20rpx;" @click="handleImgBig(item.url)">
					<image class="contentImg" :src="item.url"
						style="width: 686rpx;height: 396rpx;border-radius: 20rpx;"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="content" style="margin-top: 48rpx;">
			<view class="contentitem" @click="handleMine">
				<view class="" style="margin-top:42rpx ;">
					签到
				</view>
				<view class="">
					<image class="" src="@/static/image/qd.png" style="width: 96rpx;height: 96rpx;margin-top: 42rpx;" />
				</view>

			</view>
			<view class="contentitem" @click="handlePrintOut">
				<view class="" style="margin-top:42rpx ;">
					图片上传
				</view>
				<view class="" style="position: relative;">
					<image class="" src="@/static/image/upload.png"
						style="width: 96rpx;height: 96rpx;margin-top: 42rpx;" />
					<view v-if="imgLength" class="num">
						{{imgLength}}
					</view>
				</view>

			</view>
		</view>

		<view class="announcement">
			<u-notice-bar :text="text1"></u-notice-bar>
		</view>

		<view class="content" style="margin-top: 20rpx;">
			<view class="itemcontent" @click="handleZM">
				添加桌面
			</view>
			<view class="itemcontent" @click="handleannouncwmentsList">
				活动公告
			</view>
			<view class="itemcontent" @click="handleOrderlist">
				订单进度
			</view>
			<view class="itemcontent" style="padding-top: 80rpx;position: relative;">
				转发
				<button open-type="share" class="shareBtn"></button>
			</view>

		</view>
		<view class="outBox">

			<view class="dataList">

				<view class="dataItem" v-for="(item,index) in goodsList" @click="handleDetail(item.id)">
					<image class="" :src="item.images" style="width: 306rpx;height: 306rpx;border-radius: 10rpx;" />
					<view class="contents">
						<view class="name">
							{{item.name}}
						</view>
						<!-- <view v-if="item.capacity" class="name">
							{{item.capacity == null ? "" :  item.capacity}}L
						</view> -->
						<view class="bottom">
							<view class="peice">
								￥{{item.price}}
							</view>
						</view>
						<view class="baodan">
							报单
						</view>
					</view>

				</view>
			</view>
			<view class="" style="height:30rpx;"></view>
		</view>
		<view v-if="identity == 0" class="information" @click="handlegoSaler">
			<!-- 	<view class="informationitem">
				<view class="">
					{{kanbData.address}}
				</view>
			</view>
			<view class="informationitem">
				<view class="">
					{{kanbData.time}}
				</view>
			</view>
			<view class="informationitem">
				{{kanbData.num}}单
			</view>
			<view class="informationitem">
				{{kanbData.price}}元
			</view> -->
			数据看板

		</view>

		<view class="jianjie">
			<image class="contentImg" src="@/static/image/jianjie.jpg"
				style="width: 686rpx;height: 396rpx;border-radius: 20rpx;margin-left:13rpx ;"></image>
			<view class="title">
				山东省云柔日化有限公司
			</view>
			<view class="text">
				作为洗涤用品领域的新兴品牌，云柔公司产品品类丰富，有洗衣凝露、洗衣液、洗衣粉、香皂、洗洁精等多元化产品，源源不断地为消费者提供健康优质的产品，让每个家庭拥有健康优质的生活品质。公司产品质量稳定可靠，努力为群众们提供更安全、更健康、更环保、更优质的产品。公司热衷于爱心公益事业的发展，在山东省及周边地区捐赠洗涤产品累计高达13.5万桶，合计市场价值621万元以上，得到政府以及社会的高度评价。
			</view>
		</view>

	</view>
</template>

<script>
	import {
		preOrders,
		systemConfig,
		goodsList,
		bannerList,
		salerList,
	} from "@/api/api.js"
	export default {
		data() {
			return {
				text1: "活动正在火爆进行中…………更多优惠，请关注活动公告",
				identity: 0,
				pageSize: 10,
				page: 1,
				goodsList: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				bannerList: [],
				imgLength: 0,
				kanbData: {},
				banBfFlag: null,
				share: {
					userId: ""
				}
			}
		},
		onLoad() {
			if (uni.getStorageSync("identity") == 0) {
				this.title = "业务经理"
				this.getsalerList()
			} else if (uni.getStorageSync("identity") == 1) {
				this.title = "爱心专员"
				this.getgoodsList()
			} else {
				this.title = "司机"
			}
			if (uni.getStorageSync("feedbackLength")) {
				this.imgLength = uni.getStorageSync("feedbackLength")
			}
			this.identity = uni.getStorageSync("identity")
			this.getpPreOrders()
			this.getsystemConfig()
			this.handleBannerList()
		},
		onShareAppMessage(e) {
			let pathName = ``
			if (this.identity == 0) {
				let parent_id = uni.getStorageSync("parent_id")
				pathName = `/pages/login/index?parentid=${parent_id}`
			} else {
				this.share.userId = uni.getStorageSync("userId")
				console.log("分享参数", this.share)
				// this.share = JSON.stringify(this.share)
				pathName = `pages/home/priductList?share=${this.share.userId}`
			}
			console.log("pathName", pathName)
			if (this.identity == 0) {
				return {
					title: "大衣哥",
					path: pathName,
					//此处传递share=true的目的是：可以在onload中接收到，从而判断是否是通过分享进来的。如果用不到，也可以不传。
				}
			} else {
				return {
					title: "大衣哥",
					path: pathName,
					imageUrl: "http://dayige-mini.oss-cn-beijing.aliyuncs.com/upload/images/202311/17/kmC7E5mobzDxCMBydahGs44GIPMO8wpViUlxjNUA.jpg"
					//此处传递share=true的目的是：可以在onload中接收到，从而判断是否是通过分享进来的。如果用不到，也可以不传。
				}
			}



		},
		methods: {
			handleImgBig(url) {
				uni.previewImage({
					current: 0,
					urls: [url] //必须是网址路径，否则加载不出来，如：http：或https：
				});
			},
			async getsalerList() {
				let data = []
				let res = await salerList()

				for (let i in res.data.return.data) {
					let sum = 0
					res.data.return.data[i].forEach((item, index) => {
						item.datatime = i
					})
					data.push({
						time: i,
						data: res.data.return.data[i],
						sum: sum
					})
					data.sort(function(a, b) {
						return Date.parse(b.time.replace(/-/g, "/")) - Date.parse(a.time.replace(
							/-/g, "/"));
					});
				}
				console.log("data看板", data)
				this.banBfFlag = data.length > 0 ? true : false
				this.kanbData.address = data[0].data[0].pre_orders[0].village
				this.kanbData.time = data[0].time
				this.kanbData.num = data[0].data[0].pre_orders[0].count
				this.kanbData.price = data[0].data[0].pre_orders[0].count * data[0].data[0].pre_orders[0].good_info
					.price
			},
			async handleBannerList() {
				let res = await bannerList()
				if (res.code == 1000) {
					this.bannerList = res.data
				}
			},
			//商品列表
			async getgoodsList() {

				let parentid = uni.getStorageSync("userId")
				let res = await goodsList({
					page_size: this.pageSize,
					page: this.page,
					parent_id: parentid
				})
				if (res.code == 1000) {
					this.goodsList = res.data.data
					this.goodsList.forEach((item, index) => {
						item.images = item.image[0]
					})
				}
				console.log("商品列表", res)
			},
			//获取保单数据
			async getpPreOrders() {
				let res = await preOrders({
					village: "邢村",
					date: "2002-1-1",
				})
				console.log("报单数据", res)
			},
			async getsystemConfig() {
				let res = await systemConfig()
				console.log("系统设置", res)
			},
			handleMine() {
				uni.navigateTo({
					url: "./mine"
				})
			},
			handleDetail(id) {
				uni.navigateTo({
					url: `./detail?id=${id}`
				})
			},
			handlePrintOut() {
				uni.navigateTo({
					url: "./printOut"
				})
			},
			handleannouncwmentsList() {
				uni.navigateTo({
					url: "./announcementsList"
				})
			},
			handleZM() {
				// uni.showToast({
				// 	title: '已成功添加到桌面！',
				// 	icon: "none",
				// 	duration: 1000
				// });
				uni.navigateTo({
					url: "./addDesktop"
				})
			},
			handleOrderlist() {
				console.log("this.identity", this.identity)
				if (this.identity == 0) {
					uni.navigateTo({
						url: "./managerOrder"
					})
				}
				if (this.identity == 1) {
					uni.navigateTo({
						url: "./orderList"
					})
				}

			},
			handlegoSaler() {
				uni.navigateTo({
					url: "./salerList"
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.jianjie {
		padding: 30rpx 20rpx;

		.title {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 50rpx;
			font-weight: 600;
			width: 100%;
			text-align: center;
		}

		.text {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 50rpx;
			text-indent: 50rpx;
		}

	}

	.shareBtn {
		width: 168rpx;
		height: 210rpx !important;
		background-color: transparent;
		height: 80rpx;
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		border: none !important;
		outline: none !important;
		// background-color: pink;
	}

	.shareBtn::after {
		border: none;
	}

	.outBox {
		// width: 100%;
		background: #F2F2F2;
		padding-top: 10rpx;
		margin-top: 20rpx;
	}

	.index {
		.bannerBox {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
		}

		.content {
			display: flex;
			justify-content: space-between;
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			// margin-top: 20rpx;

			.contentitem {
				width: 340rpx;
				height: 280rpx;
				background: linear-gradient(180deg, #FE5C5C 0%, rgba(255, 78, 78, 0.67) 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-size: 48rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 50rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.num {
					width: 48rpx;
					height: 48rpx;
					font-size: 40rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					background-color: #FCB471;
					border-radius: 40rpx;
					text-align: center;
					line-height: 48rpx;
					position: absolute;
					top: 20rpx;
					right: -48rpx;
				}
			}

			.itemcontent {
				width: 168rpx;
				height: 210rpx;
				background: linear-gradient(180deg, #FCB471 0%, rgba(255, 46, 46, 0.65) 100%);
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-size: 48rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 50rpx;
				padding: 0 37rpx;
				padding-top: 44rpx;
				box-sizing: border-box;
			}
		}

		.announcement {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
		}

		.btn {
			width: 702rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #FE5C5C 0%, rgba(255, 78, 78, 0.67) 100%);
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			font-size: 48rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin: 20rpx auto;
		}

		.dataList {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			padding-top: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.dataItem {
				width: 326rpx;
				// height: 500rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-right: 35rpx;
				margin-bottom: 20rpx;
				box-shadow: 2px 2px 2rpx #F2F2F2;
				padding: 10rpx;
				box-sizing: border-box;

				.contents {
					padding: 0 20rpx;
					font-size: 48rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #000000;
					line-height: 50rpx;

					.bottom {
						display: flex;
						justify-content: space-between;
						font-size: 48rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: 600;
						color: #EC2929;
						line-height: 50rpx;
						margin-top: 10rpx;
					}

					.baodan {
						width: 112rpx;
						height: 62rpx;
						font-size: 32rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
						background-color: #FE5C5C;
						text-align: center;
						line-height: 62rpx;
						border-radius: 10rpx;
						margin-top: 10rpx;
					}
				}
			}

			.dataItem:nth-child(2n) {
				margin-right: 0;
			}
		}

		.information {
			width: 100%;
			// padding: 20rpx 30rpx;
			box-sizing: border-box;
			height: 120rpx;
			background: linear-gradient(132deg, rgba(255, 158, 69, 0.94) 0%, rgba(244, 62, 62, 0.79) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			// // margin-top: 20rpx;
			// padding-bottom: constant(safe-area-inset-bottom);
			// /* 兼容 iOS 设备 */
			// padding-bottom: env(safe-area-inset-bottom);
			// display: flex;
			// justify-content: space-between;
			font-size: 40rpx;
			text-align: center;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 120rpx;

			.informationitem {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
			}
		}

		.userInfo {
			width: 702rpx;
			height: 120rpx;
			background: #F2F2F2;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			padding: 10rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			font-size: 34rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #000000;
			line-height: 40rpx;
		}
	}
</style>